<script setup>
  import { ref, toRefs, defineExpose } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';


  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormRef = ref(),
        ruleForm = ref({
          url: undefined, // URL
          securityPolicy: undefined, // 安全策略
          nodePath: undefined, // 节点路径
          certificates: undefined, //证书和密钥
        });

  // 配置按钮
  const configClick = () => {
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        emit('childFormObj', ruleForm.value);
      } else {
        return false;
      }
    })
  };
  // 父组件调用清空函数
  const clearVar = () => {
<<<<<<< HEAD
    ruleFormRef.value.resetFields();
=======
    ruleForm.value = {
      url: undefined, // URL
      securityPolicy: undefined, // 安全策略
      nodePath: undefined, // 节点路径
      certificates: undefined, //证书和密钥
    }
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.mqttForm = ruleForm.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleForm.value = {
        url: devVarTableSelectedItem.value.url, // URL
        securityPolicy: devVarTableSelectedItem.value.securityPolicy, // 安全策略
        nodePath: devVarTableSelectedItem.value.nodePath, // 节点路径
        certificates: devVarTableSelectedItem.value.certificates, //证书和密钥
      }
    } else {
      ruleForm.value = drawerStore.mqttForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :inline="true"
      label-position="right"
    >
      <el-form-item
        label="URL"
        prop="url"
        class="form-item"
        :rules="{ required: true, message: '请输入url', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.url" placeholder="请输入url"></el-input>
      </el-form-item>
      <el-form-item
        label="安全策略"
        prop="securityPolicy"
        class="form-item"
<<<<<<< HEAD
        :rules="{ required: true, message: '请输入安全策略', trigger: 'change' }"
=======
        :rules="{ required: true, message: '请输入安全策略', trigger: 'blur' }"
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
      >
        <el-select v-model="ruleForm.securityPolicy">
          <el-option label="None" value="1"></el-option>
          <el-option label="Basic256sha256" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="节点路径"
        prop="nodePath"
        class="form-item"
        :rules="{ required: true, message: '请输入节点路径', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.nodePath" placeholder="请输入节点路径"></el-input>
      </el-form-item>
      <el-form-item
        label="证书和密钥"
        prop="certificates"
        class="form-item"
        :rules="{ required: true, message: '请输入证书和密钥', trigger: 'blur' }"
      >
        <el-input v-model="ruleForm.certificates" placeholder="请输入证书和密钥"></el-input>
      </el-form-item>
    </el-form>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .form-item {
    width: calc(100% - 35px);
  }

  .config-btn {
    text-align: right;
    padding-top: 20px
  }
</style>
